<!-- 爷爷组件：作为顶层组件，通过 provide 提供数据和方法供后代组件使用 -->
<script setup>
// 导入子组件 ProvideParent（父组件），构建组件层级关系
// 爷爷组件 → 父组件（ProvideParent）→ 子组件（孙子组件）
import ProvideParent from "@/components/ProvideParent.vue";

// 从 Vue 中导入必要的 API：
// ref：用于创建响应式数据
// provide：用于向后代组件提供数据或方法（跨层级通信）
import { ref, provide } from "vue";

// 创建响应式数据 money，初始值为 1000
// 该数据将通过 provide 提供给后代组件（如孙子组件）
let money = ref(1000)

// 定义更新资金的方法 updateMoney
// 接收一个数值参数 value，用于增加 money 的值
let updateMoney = (value) => {
    money.value += value  // 修改响应式数据需通过 .value 访问
}

// 使用 provide 向后代组件提供数据和方法
// 第一个参数是注入的 key（字符串），后代组件需通过相同的 key 接收
// 第二个参数是要提供的数据或方法

// 提供 money 响应式数据
provide('money', money)

// 提供 updateMoney 方法，允许后代组件修改 money 的值
provide('updateMoney', updateMoney)
</script>

<template>
    <!-- 爷爷组件的标识文本 -->
    <div>爷爷组件</div>

    <!-- 水平线：用于视觉分隔不同层级的组件，增强结构清晰度 -->
    <hr>

    <!-- 渲染子组件 ProvideParent（父组件） -->
    <!-- 爷爷组件提供的数据会穿透到该组件的子组件（孙子组件） -->
    <ProvideParent />
</template>

<style scoped>
/* scoped 属性确保样式仅作用于当前爷爷组件 */
div {
    margin: 10px 0;  /* 上下外边距，避免与其他元素紧贴 */
    color: #333;     /* 文本颜色设为深灰色，提升可读性 */
    font-weight: bold; /* 加粗文本，突出顶层组件的层级 */
}

hr {
    border: 0;
    border-top: 1px solid #ccc; /* 稍深的水平线，与子组件形成区分 */
    margin: 10px 0;
}
</style>